<template>
  <div class="card content-box">
    <!--    <span class="text"> 定时任务</span>-->

    <el-input-number :min="10" :max="100" v-model="fontSize"></el-input-number>
    <v-ace-editor v-model:value="content"
                  @init="aceEditorInit"
                  ref="VAceEditorRef"
                  :options="options" lang="python" :theme="themeValue" style="height: 300px;width: 100%"/>


    <div style="border: 1px solid #ccc;width: 100%;height: 300px">
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          :mode="mode"
      />
      <Editor
          style="height: 500px; overflow-y: hidden;"
          v-model="valueHtml"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="handleCreated"
      />
    </div>
  </div>

</template>

<script setup lang="ts" name="timingTask">

import './config.js'

import {onBeforeUnmount, onMounted, ref, shallowRef, watch} from "vue";
import {VAceEditor} from "vue3-ace-editor"
import {themeLightOptions,themeDarkOptions} from './config'

const VAceEditorRef = ref()
const themeValue = ref('cloud9_day')
const fontSize = ref(20)

const content = ref("{\n" +
    "    // 这个是注释\n" +
    "    \"name\":\"zhangsan\"\n" +
    "}")

const options = ref({
  useWorker: true,
  enableBasicAutocompletion: true,   //启用基本自动完成功能
  enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
  enableSnippets: true,  //启用代码段
  showLineNumbers: true,
  tabSize: 4,
  printMargin: false,
  fontSize: fontSize.value,
})

watch(fontSize,(val)=>{
  VAceEditorRef.value.getAceInstance().setFontSize(val)
})


// 初始化配置
const aceEditorInit = (editor) => {
  //快捷键
  editor.commands.addCommand({
    name: 'selectall',
    bindKey: {win: 'Ctrl-Shift-F', mac: 'Command-Shift-F'},
    exec: (editor) => {
      console.log("!212")
    }
  })
}


// wangEditor
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

const mode = ref('default')  // 或 'simple'


// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  }, 1500)
})

const toolbarConfig = {}
const editorConfig = {placeholder: '请输入内容...'}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>
